<template>
    <view class="process-area">
        <view class="process" v-for="(item,index) in processArr" :key="index">
            <image v-if="index < processedSize" :src="processedImage" mode="widthFix" class="icon"></image>
            <image v-if="index >= processedSize" :src="uniProcessedImage" mode="widthFix" class="icon"></image>
        </view>
    </view>
</template>

<script>
    export default {
        props:{
            processedImage:{
                type:String,
                default:'/static/img/home/process-red.png',
            },
            uniProcessedImage:{
                type:String,
                default:'/static/img/home/process-gray.png',
            },
            processedSize:{type:Number,default:5},
            allProcessedSize:{type:Number,default:8},
			metaO:{
				type:Object,
				default:function(){return {}}
			}
        },
        data() {
            return {}
        },
        computed:{
			//:processedSize="allProcessedSize * test.curProcess/(test.totalProcess==0?1:test.totalProcess)"
            // processedSize(){
			// 	let size = this.metaO.totalProcess;
			// 	if(size==0){
			// 		size=1
			// 	}else if(size > 10){
			// 		size = 10
			// 	}
			// 	return  size * this.metaO.curProcess/
			// 	(this.metaO.totalProcess==0?1:this.metaO.totalProcess)
			// },
			processArr(){
				// let size = this.metaO.totalProcess;
				// if(size==0){
				// 	size=1
				// }else if(size > 10){
				// 	size = 10
				// }
                const s =  Array(this.allProcessedSize).fill(10).map((v, i) => i);
                return s;
            }
        },
        watch: {},
        methods: {}
    }
</script>

<style lang="less" scoped>
    .process-area {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        margin-right: 50upx;
        margin-left: 35upx;
    }
    .process {
        // width:28upx;
        // height: 28upx;
        margin-right: 8upx;

        .icon {
            width: 28upx;
            height: 28upx;
        }
    }
</style>
